import React,{useEffect,useState} from 'react'
import { useDispatch,useSelector } from 'react-redux'
import {useNavigate,useLocation,useParams} from 'react-router-dom'
import * as api from '../../api/index'

import {NavBar,Sidebar, Toast,Image,Space, Badge  } from 'react-vant'
import classify from '../../css/Classify.scss'
import { Cart } from '@react-vant/icons';
function Classify() {
  const dispatch=useDispatch()
  const [active, setActive] = useState(0);
  const navigate=useNavigate();
  useEffect(()=>{
    dispatch(api.getList())
  },[dispatch])
  //获取state 中list数据
  const dates=useSelector(state =>{
    return state.reducer.list
  })
  console.log(dates)
  //切换数据
  const onChageIndex=(inds)=>{
    console.log(inds);
    dispatch(api.changIndex(inds))
  }

  const sonList =useSelector(state =>{
    return state.reducer.sonList
  })

  //进去详情页面
  const openDetail=(item)=>{
    console.log(item)
    navigate('/detail/'+item.id,{state:item,replace:true});
  }

  const addShop =(e,ids)=>{
    e.stopPropagation()
    dispatch(api.addShop(ids))
  }
  
  return (
    <div className='Classify'>
        <NavBar title={"分类页面"}/>
        <div className='Boxs'>
        
          <Sidebar
            value={active}
            onChange={(v) => {
              setActive(v);
              onChageIndex(v)
              Toast.info(`标签名 ${v + 1}`);
            }}
          > 
            {
               dates && dates.map((item,index)=>{
              return <Sidebar.Item  key={index} title={item.title} />  
              })
            } 
            
          </Sidebar> 
          <div className='cents'>
              {
                sonList && sonList.length ? sonList.map((item,index)=>{
                  return <div className='divs' key={index} onClick={()=> openDetail(item)}>
                    <Image src={item.img}/>
                    <div>
                      <h4>{item.title}</h4>
                      <div>
                        {
                          item.tag.map((v,i)=>{
                            return <span key={i}>{v}</span>
                          })
                        }
                      </div>
                      <div className='bots'>
                        <p className='price'>￥{item.price}</p>
                        <Space className='demo-icon' gap={0} onClick={(e)=> {addShop(e,item.id)} }>
                          <Badge dot>
                            <Cart />
                          </Badge>
                        </Space>   
                      </div>
                      
                    </div>
                  </div>
                }):"暂无数据"
              }
          </div>
        </div>

    </div>
  )
}

export default Classify